<template>
	<view class="main">
    <view class="flex item" style="justify-content: space-between;">
      <view>类型</view>
      <radio-group @change="radioChange" class="flex">
				<label class="uni-list-cell uni-list-cell-pd flex" v-for="(item, index) in items" :key="item.value"  >
					<view>
						<radio :value="item.value" :checked="index === current" style="transform: scale(0.7);" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
    </view>
    <view class="item flex" style="justify-content: space-between;">
      <view>内容</view>
      <textarea class="text" name="" id="" cols="30" rows="10" v-model="content"></textarea>
    </view>
    <view class="item" style="border-bottom: 0;" >
       上传图片：
    </view>
   <view class="flex">
      <view class="bg-img" v-for="(img,index) in imgList" :key="index" v-if="imgList.length>0" style="width: 200rpx;height: 200rpx;">
        <image :src='imgList[index]' mode='aspectFill' style="width: 100%;height: 100%;margin-right: 10rpx;"></image>
        <view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
          <uni-icons type="clear" size="20" color="red"></uni-icons>
        </view>
      </view>
      <view class="solids" @tap="ChooseImage" v-if="imgList.length<6">
        <view class="scam">
          <uni-icons type="camera" size="50"  color="#eee"></uni-icons>
        </view>
      </view>
    </view>
    <view class="bnt" @click="submit">提交 </view>
	</view>
</template>

<script>
  // import config from '@/config'
  const picUrl = import.meta.env.VITE_APP_RESOURCES_URL
  const baseUrl = import.meta.env.VITE_APP_BASE_API
	export default {
		data() {
			return {
				imgList:[],
        current:0,
        items:[{
          value:0,
          name:'投诉'
        },{
          value:1,
          name:'建议'
        }],
        content:'',
        token:''
			}
		},
    mounted() {
      this.token=uni.getStorageSync('Token')
    },
		methods: {
      deleteImage(index){
      	 this.imgList.splice(index, 1)
      },
			ChooseImage: function(e) {
				let that = this;
				wx.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res);
						 uni.uploadFile({
							//url:"http://192.168.1.5:8080/file/upload",
							//url:"https://zhwy.pengyuevip.com/gateway/file/upload",
							 url:baseUrl + "/user/file/upload/element",
							 filePath:res.tempFilePaths[0],
							 name:'file',
							 header: { 'Authorization': 'Bearer '+   that.token },
							 success(res) {
								 console.log(res)
								 let url=JSON.parse(res.data).data;
								 that.imgList.push( picUrl +url);
							 }
						 })
					}
				});
			},
      radioChange(e){
        console.log(e.detail.value)
        this.current=e.detail.value
      },
      submit(){
        let that=this
        uni.showLoading()
        http.request({
          url: '/p/user/complaintSuggestions',
          method: 'POST',
          data: {
           uid:uni.getStorageSync('info').userId,
           type:that.current,
           content:that.content,
           imgs:that.imgList.join(','),
           status:0
          }
        })
          .then(({ data }) => {
            uni.switchTab({
              url:"/pages/user/user"
            })
            uni.hideLoading()
          })
      }
		}
	}
</script>

<style lang="scss">
  .main{
    padding: 30rpx 40rpx;
    font-size: 28rpx;
  }
  .item{
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }
  .text{
    width: 75%;
    border: 1px solid #eee;
    align-items: top;
    height: 230rpx;
    padding: 20rpx 30rpx;
  }
.flex{
  display: flex;
  align-items: center;
}
 .bnt{
    width: 80%;
    margin: 50rpx 10% 30rpx;
    text-align: center;
    padding: 20rpx 0;
    background: #3a86b9;
    color: #fff;
    font-size: 29rpx;
    border-radius: 38rpx;
  }
  .scam{
    width: 180rpx;
    height: 180rpx;
    border: 1px solid #eee;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .bg-img{
    position: relative;
   .cu-tag{
     position: absolute;
     right: 10rpx;
     top: 0;
   }
  }
</style>
